<template lang="pug">
div
  tab-student(:studentArr="studentArr")
  el-row(:gutter="22")
    el-col(:span="4")
     .time-z
        age-group(:timeArr="timeArr")
    el-col(:span="20")
      s-table(
          ref="table"
          :border="true"
          :dataPops="tableObj.data"
          :column="tableObj.column"
          :filterProps="{fields: tableObj.filterItems}"
        )
         template(slot="photos" slot-scope="text, scope, indexs")
           .photos-list
             .img-l(v-for="(item, index) in text" :key="index")
                img(:src="item.url")
                i.el-icon-close(@click="deleteImg(indexs, index)")
             upload-file(
                  v-bind="tableObj.fieldProps"
                  @success="successUpfile($event, indexs)"
                  btnSize="mini"
                  btnText="选择照片"
                )
         template(slot="isComplete" slot-scope="text, scope, indexs")
          el-select(
             v-model="text"
             placeholder="请选择"
             @change="completeChange($event, indexs)"
          )
           el-option(
             v-for="item in dict.yesNo"
            :key="item.value"
            :label="item.label"
            :value="item.value"
           )
         template(slot="detailDate" slot-scope="text, scope, indexs")
           el-date-picker(
              v-model="text.time"
              type="date"
              placeholder="选择日期"
           )
           div {{text.age}}

</template>
<script>
import { column, staffSeachConfig } from './config'
import IPagination from '@/components/Basic/Pagination'
import TabStudent from '@/components/Basic/TabStudent/index.vue'
import AgeGroup from './components/AgeGroup'
import UploadFile from '@/components/Basic/Form/Upload/UploadFile'
export default {
  components: {
    IPagination,
    TabStudent,
    AgeGroup,
    UploadFile
  },
  data () {
    return {
      tableObj: {
        column,
        data: [
          {
            timerShaft: '00月02周 ~02月03周',
            mileageItems: '会将物品放入指定地方',
            photos: [
              { url: 'https://saas.res.dotflat.cn/teach/file/system/2022-01/2022-01-16_10-57-01-097.webp' },
              { url: 'https://saas.res.dotflat.cn/teach/file/system/2022-01/2022-01-16_10-57-01-097.webp' }
            ],
            isComplete: '1',
            detailDate: {
              time: '2021-12-16',
              age: '15个月16天'
            }
          }
        ],
        fieldProps: {
          imgFlag: false,
          limit: 1000,
          accept: 'image/*',
          'show-file-list': false,
          success: this.upSuccess
        },
        filterItems: staffSeachConfig
      },
      studentArr: [
        {
          name: '郭吴琪',
          url: 'https://saas.res.dotflat.cn/teach/file/system/2022-01/2022-01-16_10-57-01-097.webp',
          age: '15个月'
        },
        {
          name: '李四',
          url: 'https://saas.res.dotflat.cn/teach/file/system/2022-01/2022-01-16_10-57-01-097.webp',
          age: '18个月'
        },
        {
          name: '张三',
          url: 'https://saas.res.dotflat.cn/teach/file/system/2022-01/2022-01-16_10-57-01-097.webp',
          age: '20个月'
        }
      ],
      timeArr: [
        { time: '00-01~06-04', id: '1' },
        { time: '00-02~02-03', id: '2' },
        { time: '00-02~02-04', id: '3' },
        { time: '00-03~02-04', id: '4' },
        { time: '01-01~01-04', id: '5' },
        { time: '01-01~12-04', id: '6' },
        { time: '01-02~03-03', id: '7' }
      ]
    }
  },
  computed: {
  },
  methods: {
    // 上传后的回调
    successUpfile (fileList, index) {
      const url = fileList[0].response.data.url
      this.tableObj.data[index].photos.push({ url })
    },
    // 删除图片
    deleteImg (indexs, index) {
      this.tableObj.data[indexs].photos.splice(index, 1)
    },
    completeChange (val, indexs) {
      this.tableObj.data[indexs].isComplete = val
    }
  }
}
</script>
<style lang="scss" scoped>
.photos-list {
  .img-l {
    width: 80px;
    position: relative;
     img {
        width: 100%;
        margin-right: 5px;
     }
    .el-icon-close {
      position: absolute;
      color: red;
      font-size: 18px;
      top: 0;
      right: 0;
      cursor: pointer;
    }
  }

}
</style>
